<template>
  <div>
    <!--面包屑导航区</h3>-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item >用户</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/welcome'}" >首页</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图-->
    <el-card class="box-card">
      <!--欢迎文字视图-->
      <div class="welcome-message" style="text-align: center; margin: 20px 0;">
        <h3>欢迎来到我们的酒店预订平台！</h3>
        <p>在这里，您可以轻松浏览并选择心仪的酒店进行预定。</p>
      </div>
      <!--表格-->
      <el-table
          stripe  :data="filteredHotelList" border height="600px" style="width: 100%">
        <el-table-column
            width="60px" type="index">
        </el-table-column>
        <el-table-column
            align="center" prop="hotelName" label="酒店名" width="180">
        </el-table-column>
        <el-table-column
            align="center"  label="价格" width="180">
          <template v-slot:default="scope">
            {{ scope.row.minPrice + '~~' + scope.row.maxPrice }}
          </template>
        </el-table-column>
        <el-table-column
            align="center" prop="roomCount" label="房间数量" width="100">
        </el-table-column>
        <el-table-column
            align="center" prop="city"  label="所在城市" width="100">
        </el-table-column>
        <el-table-column
            align="center"  prop="address" label="地址" width="180">
        </el-table-column>
        <el-table-column
            align="center" prop="phone" label=电话>
        </el-table-column>
        <el-table-column
            align="center"
            label="操作">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="查看详情" placement="right">
              <el-button type="success" icon="el-icon-s-promotion" size="mini" @click="toRoomTable(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
  import axios from "axios";

  export default {
    name:'welcome',
    computed: {
      //过滤掉不营业的酒店
      filteredHotelList() {
        return this.hotelList.filter(hotel => !hotel.hotelStatus);
      }
    },
    data(){
      return{
        roomCountList:[],
        hotelList: [],
        form: {
          id: '',
          hotelName: '',
          address: '',
          city: '',
          hotelStatus: '',
          phone: '',
        },
      }
    },
    methods:{
      //跳转页面
      toRoomTable(row){
        window.sessionStorage.setItem('hotelId',row.id)
        this.$router.push('/roomDisplay')
      },
      //获取酒店信息
      async getHotelList() {
        const {data: res} = await axios.get('/api/hotel/search')
        if (res.code!==0){
          this.$message.error(res.msg);
          return
        }
        this.hotelList = res.data.map(hotel => ({ ...hotel, roomCount: null ,minPrice: null,maxPrice: null }));
      },
      //获取酒店房间数
      async getRoomCount(){
        const {data: res} = await axios.get('/api/hotel/count')
        if (res.code !== 0) {
          this.$message.error(res.msg||res.description||"请稍后再试");
          return
        }
        this.roomCountList = res.data;
        this.roomCountList.forEach(roomCountData => {
          const hotel = this.hotelList.find(hotel => hotel.id === roomCountData.id);
          if (hotel) {
            hotel.roomCount = roomCountData.roomCount;
            hotel.minPrice= roomCountData.minPrice;
            hotel.maxPrice= roomCountData.maxPrice;
          }
        });
      },
      async fetchData() {
        try {
          await this.getHotelList();
          await this.getRoomCount();
        } catch (error) {
          this.$message.error(error);
        }
      },
      // //查找酒店
      // async toSearch() {
      //   try {
      //     const params = {
      //       hotelName: this.form.hotelName || null,
      //       city: this.form.city || null,
      //       address: this.form.address || null,
      //       hotelStatus: this.form.hotelStatus || null,
      //     };
      //     const response = await axios.get('/api/hotel/search', {params});
      //     if (response.data.code !== 0) {
      //       this.$message.error(response.data.description);
      //       return
      //     }
      //     this.hotelList = response.data.data;
      //
      //   } catch (error) {
      //     this.$message.error(error)
      //   }
      // },
      //重置搜索框
      // reset() {
      //   this.fetchData()
      //   this.form={}
      // },
    },
    mounted() {
    },
    created() {
      this.fetchData()
    }

  }
</script>

<style scoped>

</style>